<template>
	<view>
		<view class="flex-col page">
			<view class="flex-col justify-start section">
				<view class="flex-col justify-start section_2">
					<view class="flex-col">
						<view class="" :style="{height:(statusBarHeight)+'px'}"></view>
						<view class="flex-col justify-start items-start section_3">
							<view class="flex-row items-center group" @click="locationClick()">
								<view class="font textasad">{{location.address===''?"请选择服务地址":location.address}}</view>
								<image class="shrink-0 image_3 ml-1-5"
									src="@/static/17485750150219847058.png" />
							</view>
						</view>
						<view class="flex-row items-center section_5">
							<image class="shrink-0 image_5"
								src="@/static/17485750150531665574.png" />
							<text class="font_2 text ml-5-5">欢迎登陆百吉星社工通！！</text>
						</view>
						<view class="cflex-c" style="z-index: 9999;width: 690rpx;margin-left: 30rpx;margin-top: 30rpx;">
							<u-swiper @change="swiperChange" mode="none" height="600rpx"
								style="border-radius: 20rpx;z-index: 9999;width: 690rpx;" :list="list"
								@click="goSwiperContent()"></u-swiper>
						</view>
					</view>
				</view>
			</view>

			<!-- 详细 -->
			<view class="cflex-c" style="background-color: #Fff;	border-radius: 16rpx; margin-top: -20rpx;">
				<!-- 选择栏 -->
				<u-sticky bg-color="#fff"  :enable="false">
					<view class="cflex-r" :style="{backgroundColor:stickyBarBg }"
						style="justify-content: space-around;align-items: center; height: 88rpx;;">
						<view @tap="tabClick(index)" v-for="(item,index) in tabList" :key="index" class="cflex-c"
							style="justify-content: center; align-items: center;">
							<view
								:style="{color:item.isSelect?'#4578F7':'#636363',fontWeight:item.isSelect?'bold':'normal'}">
								{{item.text}}
							</view>
							<view :style="{opacity:item.isSelect?1:0}" class="u-m-t-4"
								style="width: 90%;height: 8rpx; background-color: #4578F7;border-radius: 15rpx;"></view>
						</view>
					</view>
				</u-sticky>

				<view class="" >
					<view class="" style="margin-left: 30rpx;margin-bottom: 30rpx;margin-top: 20rpx;"
						v-if="platformList.length>0 ">
						<zjcScroll :platformList='platformList' />
					</view>
					<view class="" v-else
						style="width: 750rpx;height: 400rpx;display: flex;justify-content: center;align-items: center;">
						<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
						</u-empty>
					</view>
				</view>
				<view class="flex-col relative list">
					<view class="flex-col list-item section_11 mt-14-5" v-for="(item, index) in botomList" :key="index">
						<view class="flex-row justify-between items-center">
							<view class="flex-row items-center">
								<image class="shrink-0 image_12" src="@/static/img/17485750137071682335.png" />
								<text class="font_5 ml-10-5">{{item.typeName}}</text>
							</view>
							<view class="flex-row items-center group_5" @click="goClassiFication">
								<text class="font_6">更多</text>
								<image class="shrink-0 image_3 ml-3" src="@/static/img/17485750137225635175.png" />
							</view>
						</view>
						<view class="flex-row equal-division mt-18">
							<view class="flex-col group_6 equal-division-item" v-for="(meth,k) in item.itemList"
								@tap="toonItemClick(meth.id)">
								<image class="image_13" :src="meth.photo" />
								<view class="flex-col items-start section_9 mt-2">
									<text class="font_7">{{meth.name}}</text>
									<view class="group_7 mt-7">
										<text class="font_8 text_4">{{meth.disPrice}}~{{meth.price}}</text>
										<text class="font_3">元</text>
										<text class="font_9 text_7">/小时</text>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
	</view>

</template>

<script>
	import "../common/loginutil.js"
	import zjcScroll from "../components/zjc-scroll-nav/zjc-scroll-nav.vue"
	import shop from "@/pages/ziyuan/ziyuan"
	// import "../common/location.js"
	import {
		auth
	} from '../common/authorize.js'; //权限判断

	export default {
		data() {
			return {
				count: 5,
				value: 2,

				items: [null, null, null],

				jishiList: [],
				platformList: [],

				// #ifdef MP-WEIXIN
				marginR: 200,
				weixin: true,
				// #endif

				// #ifdef APP-PLUS
				weixin: false,
				// #endif

				// #ifdef H5
				weixin: false,
				// #endif

				isLogin: false,
				topBarOpacity: 0,
				stickyBarBg: "#fff",
				list: [],
				itemList: [],
				typeList: [
				],
				typeId: 'hospital_care',
				tabList: [{
						text: '陪伴类',
						isSelect: true
					},
					{
						text: '服务类',
						isSelect: false
					},
					{
						text: '技术类',
						isSelect: false
					}
				],
				content: '',
				current: 0, //轮播图当前图片
				current1: 0, //当前选择的排序方式
				location: {
					lat: null,
					lng: null,
					address: '',
				}, //用户位置信息
				page: {
					No: 1,
					Size: 20
				},
				jsCode: "",
				pageSzie: 10,
				isRead: 0,
				huodongUrl: '',
				huodongType: 0,
				time: '',
				sheShow: 0,
				pageNum: 1,
				botomList: []
			}
		},
		components: {
			zjcScroll,
			shop
		},
		onShow() {
			this.BigList()
			this.time = this.accessTimeInAnHour()
			// this.location.address = uni.getStorageSync("address");
			this.location.lat = uni.getStorageSync("lat");
			this.location.lng = uni.getStorageSync("lng");
			this.sheShow = uni.getStorageSync("sheShow");
			this.swiperShow();
			// this.MoodList()

		},
		onLoad(e) {
			if (e.scene) {
				uni.setStorageSync("phone", e.scene);
			}
			if (e.phone) {
				uni.setStorageSync("phone", e.phone);
			}
			let that = this
			//#ifdef H5
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			if (this.$jwx && this.$jwx.isWechat()) { //检查是否是微信环境  
				this.$jwx.getlocation(function(res) { //获取位置  
					//拿到返回数据自行处理 
					that.$store.commit("setLat", res.latitude);
					that.$store.commit("setLng", res.longitude);
				});
			}
			uni.hideLoading()
			//#endif
			this.getIp()
			this.getJsCode()
			this.huodong()
			this.xiaoList()
		},
		onPageScroll(res) {
			if (res.scrollTop >= 150) {
				this.topBarOpacity = 1;
				this.stickyBarBg = "#ffffff"
			} else if (res.scrollTop <= 0.1) {
				this.topBarOpacity = 0;
			} else {
				this.topBarOpacity = (res.scrollTop / 150).toFixed(1)
			}
		},
		onReachBottom() {
			this.pageNum++
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.sysInfo.statusBarHeight;
			}
		},
		methods: {
			toonItemClick(index) {
				let option = JSON.stringify({
					goodsid: index
				});
				uni.navigateTo({
					url: "/pagesB/home/goods_detail?option=" + option
				})
			},
			goClassiFication(e) {
				uni.navigateTo({
					url: "/pages/TypeList/TypeList?code=" + e.typeCode + '&name=' + e.typeName
				})
			},
			async xiaoList() {
				let res = await this.$request("kehu/item/hotSmallType/list")
				console.log(res)
				this.botomList = res.data
			},

			changeGuanchu(e) {
				let that = this
				if (e.interest == 1) {
					this.$request("worker/interest/delete", {
						workerId: e.id
					}).then(res => {
						//console.log("like",res)
						if (res.msg == '操作成功') {
							uni.showToast({
								title: '取消关注',
								icon: 'none'
							})
						}
					});
				} else {
					this.$request("worker/interest/add", {
						workerId: e.id
					}).then(res => {
						//console.log("like",res)
						if (res.msg == '操作成功') {
							uni.showToast({
								title: '关注成功',
								icon: 'none'
							})
						}
					});
				}

			},
			//获取code
			wxCode() {
				let that = this
				let token = uni.getStorageSync('token')
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {
					//微信登录获取code
					//判断是否在微信浏览器中打开
					// 当前H5页面的url
					//获取链接上面的code
					if (!uni.getStorageSync('token')) {
						var local = encodeURIComponent('https://h5.baijixing.com.cn/#/pagesB/login/login');
						var appid = 'wx8c726aef4a4b511a';
						//通过微信官方接口获取code之后，会重新刷新设置的回调地址
						var wxUrl =
							'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
							appid +
							'&redirect_uri=' +
							local +
							'&response_type=code' +
							'&scope=snsapi_userinfo' +
							'&state=STATE#wechat_redirect';
						window.location.href = wxUrl;
					}
				} else {
					return false;
				}
			},


			//获取一小时后的日期  时间
			accessTimeInAnHour() {
				var date = new Date();
				var date1 = new Date().getTime(); // 获取当前时间戳
				// 当前时间戳+3600s（一小时，其他时间通过计算时间戳进行相应加减），重新设置 Date 对象
				date.setTime(date1 + 3600000);
				return this.zeroPadd(date);
			},

			//日期时间补0
			zeroPadd(date) {
				var hours = date.getHours(); // 获取时
				var minutes = date.getMinutes(); // 获取分
				var seperator1 = "-"; // 自定义日期分隔符
				var year = date.getFullYear(); // 获取年
				var month = date.getMonth() + 1; // 获取月
				var strDate = date.getDate(); // 获取日

				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if (hours >= 0 && hours <= 9) {
					hours = "0" + hours;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}

				var time = hours + ":" + minutes; // 时分
				var currentdate = year + seperator1 + month + seperator1 + strDate; // 年月日
				var date = time
				return date;
			},

			async huodong() {
				let that = this
				let res = await this.$request("kehu/JiajiaHomeActivity/getInfo", {}, 'get')
				this.huodongUrl = res.data.url
				this.huodongType = res.data.type
				//#ifdef H5
				if (uni.getStorageSync('token') == '') {
					setTimeout(() => {
						that.wxCode()
					}, 1000)
				}
				//#endif
			},
			tozhao() {
				uni.navigateTo({
					url: '/pagesB/zhaoping/zhaoping?type=' + this.huodongType
				})
			},
			async BigList() {
				let res = await this.$request("kehu/item/bigType/list", {}, 'get')
				// console.log(res)
				let list = res.data
				this.tabList = []
				list.forEach(item => {
					this.tabList.push({
						isSelect: false,
						text: item.name,
						id: item.id
					})
				})
				this.BigTypeId = res.data[0].id
				this.tabList[0].isSelect = true
				this.tablist()
				// #ifdef MP-WEIXIN
				if (this.location.address == "" || this.location.lat == "" || this.location.lng == "") {
					this.getLocation();
				} else {
					this.getLocation();
				}
				// #endif
			},
			toMroe() {
				uni.switchTab({
					url: '/pages/tab2'
				})
			},
			goDetail(e) {
				// console.log(e)
				if (e.status === 0) {
					uni.showToast({
						title: '该社工今天休息',
						icon: 'none'
					})
					return
				}


				uni.navigateTo({
					url: '/pagesB/jishi/jishi_info?id=' + e.id
				})
			},

			MoodList() {
				this.$request("kehu/item/type/list", {}, 'get').then(res => {
					let ress = res.data
					this.typeList = []
					ress.forEach((item, i) => {
						this.typeList.push({
							label: item.name,
							value: item.id
						})
					})
				});
			},
			tabelQie(e) {
				this.typeId = e.id
				this.page.No = 1
				this.$store.commit("setType", this.typeId);
				this.swiperShow()
			},
			goSwiperContent() {
				// // this.list[this.current].url=""
				// if (this.list[this.current].url.trim() == "" || this.list[this.current].url == null)
				// 	return
				// let url = JSON.stringify(this.list[this.current].url)
				// uni.navigateTo({
				// 	url: "../pagesB/home/swiperContent?url=" + url
				// })

				uni.navigateTo({
					url: this.list[this.current].url + this.huodongType
				})

			},
			getLocation() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res1) {
						// console.log("res1地址==============>", res1)
						that.$store.commit("setLat", res1.latitude)
						that.location.lat = res1.latitude

						that.$store.commit("setLng", res1.longitude)
						that.location.lng = res1.longitude;

						// #ifdef APP-PLUS
						if (res1.address) {
							that.$store.commit("setAddress", res1.address.poiName)
							that.location.address = res1.address.poiName
						}
						// #endif

						// #ifdef MP-WEIXIN
						if (that.location.address == '') {
							that.$request("common/getAddreseByLocation").then(res => {
								// console.log("地址==============>", res);
								that.$store.commit("setAddress", res.msg);
								that.location.address = res.msg;
							})
						}
						// #endif
					},
					fail(err) {
						// console.log(err, 2222)
						if (err.code == 1) {
							that.location.address = "获取定位失败"
							uni.showModal({
								title: "提示",
								content: "获取定位失败,请检查是否开启了定位",
								showCancel: false
							});
						}
					}
				});
			},
			getIp() {
				uni.request({
					url: 'https://pv.sohu.com/cityjson?ie=utf-8',
					method: 'GET',
					data: {},
					success: res => {
						let loca = JSON.parse(res.data.slice(res.data.search("{"), res.data.search("}") + 1));
						//console.log(loca)
						var a = res.data.split("=")[1]
						if (a.length <= 0) {
							return
						}
						let b = a.substr(0, a.length - 1);
						let c = JSON.parse(b)
						// // //console.log(c);
						this.$store.commit("setIp", c.cip);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getJsCode() {

				//#ifdef MP-WEIXIN
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.setStorageSync("jsCode", loginRes.code);
					},
					fail: (err) => {}
				});
				//#endif
			},
			async tablist() {
				let res = await this.$request("kehu/item/type/list", {
					bigTypeId: this.BigTypeId
				}, 'get')
				this.platformList = res.data
			},
			async swiperShow() {
				let obj = {
					sort: this.current1,
					pageNo: this.page.No,
					pageSize: this.page.Size,
					typeCode: this.typeId
				}
				this.$request("kehu/home/home", obj).then(res => {
					this.list = res.data.bannerLists;
					this.isRead = res.data.isRead;
					let tempLists = res.data.itemList == null ? [] : res.data.itemList;
					if (this.page.No == 1) {
						this.itemList = [];
					}
					this.itemList = this.itemList.concat(tempLists);

					if (tempLists.length < this.page.Size) {
						this.status = "nomore";
					}
					this.page.No = this.page.No + 1;
				});

			},
			swiperChange(e) {
				this.current = e;
			},
			tabClick(index) {
				this.tabList[this.current1].isSelect = false;
				this.tabList[index].isSelect = true;
				this.BigTypeId = this.tabList[index].id
				this.current1 = index;
				this.page.No = 1; //重置页数
				// console.log(this.tabList[index])
				this.tablist()

			},
			onNotifyClick() {
				let isLogin = this.$store.state.isLogin;
				//console.log(isLogin);
				if (isLogin == false) {
					this.loginUtil.goLogin(this);
				} else {
					uni.navigateTo({
						url: "../pagesB/my/xitongxiaoxi"
					})
				}
			},
			onItemClick(index) {
				// // //console.log(index)
				let isLogin = this.$store.state.isLogin;
				this.isLogin = isLogin;
				//console.log(isLogin);
				if (isLogin == false) {
					// 调用登录判断
					this.loginUtil.goLogin(this);
				} else {
					let option = JSON.stringify({
						goodsid: index
					});
					uni.navigateTo({
						url: "../pagesB/home/goods_detail?option=" + option
					})
				}
			},
			async locationClick() { //选择服务地址
				//console.log("选地址");//微信开发者工具点了可能没有反应
				let that = this
				uni.chooseLocation({
					success: (res) => {
						// console.log("选择", res)
						this.location.address = res.name;
						this.location.lat = res.latitude;
						this.location.lng = res.longitude;
						that.$store.commit("setLat", res.latitude)
						that.$store.commit("setLng", res.longitude)
						that.$store.commit("setAddress", res.name);
						if (city === "") //获取不到区县如大学城等轻轨站
						{
							that.$request("common/getAddreseByLocation").then(res => {
								city = that.getCity(res.msg);
							})
						}
						that.$store.commit("setCity", city); //存储起来
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.textasad {
		width: 400rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.xuanze_bt {
		width: 150rpx;
		height: 60rpx;
		color: #fff;
		border-radius: 30rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
		background: linear-gradient(#2869FE, #b9c8ff);
		margin-right: 7rpx;
	}

	.item_pin {
		margin-top: 8rpx;
		font-size: 24rpx;
	}

	.item_right {
		margin-left: 15rpx;
	}

	.item_box {
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 25rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 15rpx;
	}

	.item_imgBox {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
		margin-left: 7rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.item_span span {
		padding: 5rpx 8rpx;
		background-color: #D9EAFF;
		font-size: 24rpx;
		margin-right: 15rpx;
		border-radius: 10rpx;
		color: #2869FE;

	}

	.item_span {
		margin-top: 5rpx;
	}

	.item_title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.item_pintext {
		margin-top: 8rpx;
		font-size: 24rpx;
		width: 450rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #999999;
	}







	.cardList {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;

		.cardItem {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 4rpx solid #eee;
			background-color: #fff;

			.ItemLeft {
				width: 60%;
				display: flex;
				flex-direction: column;
				padding: 0 20rpx;

				.title {
					color: #333;
					font-size: 28rpx;
				}

				.detailsText {
					margin-top: 25rpx;
					color: #999;
					font-size: 24rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			.picBox {

				flex: 1;
				border-radius: 8rpx;
				overflow: hidden;

				.pic {
					width: 100%;
					height: 100%;

				}
			}

		}
	}







	.container {
		width: 300rpx;
		/* 设置一个宽度小于文本内容的宽度 */
		overflow: hidden;
		/* 隐藏溢出的内容 */
		text-overflow: ellipsis;
		/* 使用省略号表示溢出的内容 */
		white-space: nowrap;
		/* 阻止文本换行 */
	}

	.item_dibuOne {
		width: 120rpx;
		background-color: #4578F7;
		color: #fff;
		font-size: 25rpx;
		height: 40rpx;
		line-height: 37rpx;
		text-align: center;
		border-radius: 30rpx;
	}

	.item_liji {
		width: 120rpx;
		background-color: #4578F7;
		color: #fff;
		font-size: 25rpx;
		height: 60rpx;
		line-height: 57rpx;
		text-align: center;
		border-radius: 15rpx;
		margin-top: -10rpx;
	}

	.item_box1 {
		width: 730rpx;
		margin-left: 10rpx;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding-bottom: 30rpx;
	}

	.item_top {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.item_topleft {
		width: 40rpx;
		height: 56rpx;
		margin-left: 2%;
		z-index: 1;
	}

	.item_topright {
		padding: 10rpx 20rpx;
		background-color: #4578F7;
		color: #fff;
		font-size: 24rpx;
		border-radius: 0 10rpx 0 10rpx;
	}

	.item_zhong {
		width: 96%;
		margin-left: 2%;
		display: flex;
		margin-top: -24rpx;
	}

	.item_flx {
		display: flex;
		align-items: end;
		margin-left: 18rpx;
	}

	.item_flxTitle {
		font-weight: 600;
		font-size: 36rpx;
	}

	.item_xinxin {
		display: flex;
		font-size: 24rpx;
		color: #FFBE0C;
		margin-left: 10rpx;
		margin-top: 8rpx;
	}

	.item_des {
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-left: 18rpx;
		margin-top: 24rpx;
		color: #a3a3a3;
	}

	.item_xxx {
		width: 83%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_xxxFlx {
		display: flex;
		align-items: center;
	}

	.item_dibu {
		width: 96%;
		margin-left: 2%;
		display: flex;
		margin-top: 17rpx;
		justify-content: space-between;
	}

	.item_dibufLX {
		display: flex;
		color: #bfbfbf;
	}





	.ml-1-5 {
		margin-left: 3rpx;
	}

	.ml-5-5 {
		margin-left: 11rpx;
	}

	.ml-3-5 {
		margin-left: 7rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.mt-14-5 {
		margin-top: 29rpx;
	}

	.ml-10-5 {
		margin-left: 21rpx;
	}

	.ml-3 {
		margin-left: 6rpx;
	}

	.mt-7 {
		margin-top: 14rpx;
	}

	.page {
		padding-bottom: 31rpx;
		background-color: #f8fbff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding-bottom: 46rpx;
		background-image: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
	}

	.section_2 {
		padding: 33rpx 0 70rpx;
		background-image: url('https://baijixing.oss-cn-chengdu.aliyuncs.com/2025/JUNE/3/1748942999977_7f8ecebb-90ae-454e-b742-edb608d1d345.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_3 {
		padding: 29rpx 0 33rpx;
		background-color: #00000000;
	}

	.group {
		margin-left: 31rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 26rpx;
		font-weight: 500;
		color: #333333;
	}

	.image_3 {
		width: 13rpx;
		height: 16rpx;
	}

	.section_5 {
		margin: 0 30rpx;
		padding: 20rpx 22rpx 20rpx 24rpx;
		background-color: #ffffff66;
		border-radius: 16rpx;
	}

	.image_5 {
		width: 32rpx;
		height: 32rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 23rpx;
		color: #222222;
	}

	.text {
		color: #333333;
	}

	.section_6 {
		margin: 20rpx 30rpx 0;
		padding: 72rpx 33rpx 61rpx;
		background-image: url('https://baijixing.oss-cn-chengdu.aliyuncs.com/2025/JUNE/3/1748943068916_f2636ad1-b6eb-4be3-9f77-a2970874bf8e.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_8 {
		margin-top: 3rpx;
		width: 49rpx;
		height: 50rpx;
	}

	.image_6 {
		width: 50rpx;
		height: 53rpx;
	}

	.image_9 {
		width: 47rpx;
		height: 50rpx;
	}

	.image_7 {
		width: 53rpx;
		height: 53rpx;
	}

	.image_10 {
		margin-top: 4rpx;
		margin-bottom: 3rpx;
		width: 47rpx;
		height: 46rpx;
	}

	.text_2 {
		margin-top: 19rpx;
		line-height: 28rpx;
	}

	.text-wrapper {
		margin-top: 27rpx;
		padding: 11rpx 0 12rpx;
		background-color: #1295ff;
		border-radius: 20rpx;
		width: 101rpx;
	}

	.font_3 {
		font-size: 18rpx;
		font-family: PingFangSC;
		line-height: 17rpx;
		font-weight: 500;
		color: #ff6300;
	}

	.text_3 {
		color: #ffffff;
	}

	.group_3 {
		margin-top: 16rpx;
		padding: 0 95rpx 521rpx;
	}

	.section_8 {
		background-color: #1295ff;
		border-radius: 5rpx;
		width: 46rpx;
		height: 10rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 26rpx;
		color: #666666;
	}

	.pos_6 {
		position: absolute;
		right: 95rpx;
		top: 0;
	}

	.group_4 {
		padding-top: 5rpx;
	}

	.pos_4 {
		position: absolute;
		left: 0;
		right: 30rpx;
		top: 0;
	}

	.section_7 {
		background-color: #ffffff;
		border-radius: 0 16rpx 16rpx 0;
		width: 178rpx;
		height: 582rpx;
	}

	.grid {
		padding-left: 38rpx;
		padding-right: 10rpx;
		height: 444rpx;
		display: grid;
		grid-template-rows: repeat(3, minmax(0, 1fr));
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 0;
		column-gap: 0;
	}

	.pos_8 {
		position: absolute;
		left: 0;
		right: 0;
		top: 81.5rpx;
	}

	.grid-item {
		padding: 10.5rpx 0 14.5rpx;
	}

	.image_11 {
		width: 96rpx;
		height: 96rpx;
	}

	.divider {
		background-color: #efefef;
		width: 590rpx;
		height: 1rpx;
	}

	.pos_7 {
		position: absolute;
		right: 50rpx;
		top: 65rpx;
	}

	.pos_5 {
		position: absolute;
		left: 88rpx;
		top: 0;
	}

	.list {
		margin-top: -9rpx;
		padding: 0 30rpx;
	}

	.list-item {
		padding: 35rpx 0 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.section_11 {
		padding: 34rpx 0 31rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.image_12 {
		width: 10rpx;
		height: 34rpx;
	}

	.font_5 {
		font-size: 32rpx;
		font-family: PingFangSC;
		line-height: 29rpx;
		font-weight: 500;
		color: #333333;
	}

	.group_5 {
		margin-right: 31rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 23rpx;
		color: #999999;
	}

	.equal-division {
		padding: 0 21.5rpx;
	}

	.group_6 {
		flex: 1 1 215rpx;
	}

	.equal-division-item {
		padding: 4rpx 6.5rpx 0 8.5rpx;
	}

	.image_13 {
		margin: 0 4rpx;
		width: 192rpx;
		height: 192rpx;
		border-radius: 12rpx;
	}

	.section_9 {
		padding: 16rpx 12rpx 22rpx;
		background-image: url('https://ide.code.fun/api/image?token=683e4ee3797f850011045914&name=273b90506b2a8e2eba4aae0794a17e05.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 23rpx;
		font-weight: 500;
		color: #333333;
	}

	.group_7 {
		line-height: 22rpx;
	}

	.font_8 {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 23rpx;
		font-weight: 500;
		color: #ff6300;
	}

	.text_4 {
		line-height: 22rpx;
	}

	.font_9 {
		font-size: 18rpx;
		font-family: PingFangSC;
		line-height: 17rpx;
		color: #ff6300;
	}

	.text_7 {
		line-height: 18rpx;
	}

	.group_8 {
		line-height: 22rpx;
	}

	.text_5 {
		line-height: 22rpx;
	}

	.text_8 {
		line-height: 18rpx;
	}

	.group_9 {
		line-height: 22rpx;
	}

	.text_6 {
		line-height: 22rpx;
	}

	.text_9 {
		line-height: 18rpx;
	}
</style>